<template>
    <div>
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container">
                <!-- <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">课程上传</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">小工具</a></li>
                            <li class="breadcrumb-item active">课程上传</li>
                        </ol>
                    </div>
                </div> -->
            </div>
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <el-upload ref="upload" class="upload-demo" :action="uploadActionUrl" :limit="1"
                            :on-exceed="handleExceed" :auto-upload="false" :on-success="onSuccess">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                            <el-button class="ml-3" type="success" @click="submitUpload">
                                上传到服务器
                            </el-button>
                            <template #tip>
                                <div class="el-upload__tip text-red">
                                    限制1个文件，新文件会覆盖老文件
                                </div>
                            </template>
                        </el-upload>

                        <!-- <el-select v-model="selectedId" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select> -->
                        <!-- <button type="button" class="btn btn-info ml-2">上传</button> -->
                        <textarea class="form-control" id="curlResTextarea" rows="3" v-model="curlVal"></textarea>

                        <el-button type="danger" class="mt-3"  @click="copyVal" style=" width: 100px;">复制地址</el-button>
                    </div>

                   
                </div>
                <!-- /.row -->
            </div>

        </div>
    </div>
</template>

<script>
import { get } from '@/utils/api'
import { ref } from 'vue'
import { genFileId } from 'element-plus'
import gconfig from '@/config/global_config'

export default {
    setup() {
        const upload = ref();
        const uploadActionUrl = gconfig.constants.API_ORIGIN + '/tool/upload'
        const handleExceed = (files) => {

            if (upload.value) {
                console.log("files: " + files)
                upload.value.clearFiles();
                const file = files[0];
                file.uid = genFileId(); // 确保已经定义了 genFileId() 函数
                upload.value.handleStart(file);
            }
        };
        const submitUpload = () => {
            //console.log("submit upload:" + upload.value);
            if (upload.value) {
                upload.value.submit();
            }
        };

        return {
            upload,
            handleExceed,
            submitUpload,
            uploadActionUrl
        };
    },
    name: "uploadIndex",
    data() {
        return {
            // val: '',
            curlVal: '',
            paramsText: '',
            formParam: {
                postParams: ''
            },
            options: [],
            selectedId: null,

        };
    },
    mounted() {
        this.fetchOptions();
    },
    methods: {
        async copyVal() {
            try {
                await navigator.clipboard.writeText(this.curlVal);
                this.$message.success("复制成功");
            } catch (err) {
                this.$message.error("复制失败");
            }
            
        },
        onSuccess(response) {
            console.log(response);
            this.curlVal = gconfig.constants.API_ORIGIN + response;
        },
        async fetchOptions() {
            // 发送异步请求
            var url = '/books'
            try {
                // 发送 application/json 类型的 POST 请求
                var retData = await get(url, { book_id: this.book_id }, 'form');
                this.options = retData.data

                // 发送 application/x-www-form-urlencoded 类型的 POST 请求 (取消注释以使用)
                // this.result = await post(url, data, 'form');
            } catch (error) {
                console.error('请求失败:', error);
            }
        },
        async getAll() {
            // 发送异步请求
            var url = '/chapter/get_all'
            try {
                // 发送 application/json 类型的 POST 请求
                var retData = await get(url, { book_id: this.book_id }, 'form');
                this.data = retData.data
                this.loadStaticHtml(this.data[0].children[0].url);
                // 发送 application/x-www-form-urlencoded 类型的 POST 请求 (取消注释以使用)
                // this.result = await post(url, data, 'form');
            } catch (error) {
                console.error('请求失败:', error);
            }

        },


        submitUpload1() {
            //console.log("gogo")
        }
    }
};
</script>

<!-- 
<script setup lang="ts">

import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}

const submitUpload = () => {
    upload.value!.submit()
}
</script> -->

<style scoped></style>